import * as THREE from 'three';
import {Color} from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';

import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
let container;

let camera, scene, renderer;

let mouseX = 0, mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
let object;
function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.z = -30;
    camera.position.x = 20;

    // scene

    scene = new THREE.Scene();
    scene.background = new Color(0xfab27b);
    const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
    scene.add(ambientLight);

    const pointLight = new THREE.PointLight(0xffffff, 0.8);
    camera.add(pointLight);
    scene.add(camera);

    // manager

    function loadModel() {

        object.traverse(function (child) {
            // console.log(child,'child',texture);
            // if (child.isMesh) child.material.map = texture;

        });
        scene.add(object);

    }

    const manager = new THREE.LoadingManager(loadModel);

    manager.onProgress = function (item, loaded, total) {

        console.log(item, loaded, total);

    };

    // texture

    // const textureLoader = new THREE.TextureLoader(manager);
    // const texture = textureLoader.load('/assets/model/uv_grid_opengl.jpg');

    // model

    function onProgress(xhr) {
        
        if (xhr.lengthComputable) {
            const percentComplete = xhr.loaded / xhr.total * 100;
            console.log('model ' + Math.round(percentComplete, 2) + '% downloaded');

        }

    }

    function onError(e) { 

        console.log(e,'渲染错误');
    }

    const MTL_loader = new MTLLoader(manager),Obj_loader = new OBJLoader(manager);
    MTL_loader.setPath("/assets/model/SMA/").load("SMG2Vengine.mtl",function(materials){
        materials.preload();
        Obj_loader.setMaterials(materials).setPath("/assets/model/SMA/").load('SMG2Vengine.obj', function (obj) {
            console.log(obj);
            object = obj;
            scene.add(obj);
        }, onProgress, onError);
    })
    

    //

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight/2);
    container.appendChild(renderer.domElement);
    // 点击事件
    // document.addEventListener('mousemove', onDocumentMouseMove);
    const controls = new OrbitControls( camera, renderer.domElement );
	controls.addEventListener( 'change', render ); // use if there is no animation loop
	controls.minDistance = 2;
	controls.maxDistance = 10;
	controls.target.set( 230, 3, 30 );
	controls.update();
    //

    window.addEventListener('resize', onWindowResize);

}

function onWindowResize() {

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

function onDocumentMouseMove(event) {
    console.log(event);
    // mouseX = (event.clientX - windowHalfX) / 2;
    // mouseY = (event.clientY - windowHalfY) / 2;

}

//

function animate() {


    render();
    requestAnimationFrame(animate);

}

function render() {
    camera.position.x += (mouseX - camera.position.x) * .05;
    camera.position.y += (- mouseY - camera.position.y) * .05;
    camera.lookAt(scene.position);

    renderer.render(scene, camera);

}
// init();
// animate();

export default{
    init,animate
}

